<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="数据管理"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div class="data-manager-box">
                <div
                    class="data-item"
                    @click="goTeamList('myData','2')"
                >
                    <div class="data-item-name">本店店主</div>
                    <div class="data-item-info">
                        <div class="info-detail">{{myVipData.level_2}}</div>
                        <div class="info-name">总个数</div>
                    </div>
                    <!-- <div class="data-item-info">
                        <div class="info-detail">{{teamInfo.user.last}}个</div>
                        <div class="info-name">上月新增</div>
                    </div>
                    <div class="data-item-info">
                        <div class="info-detail">{{teamInfo.user.new}}个</div>
                        <div class="info-name">本月新增</div>
                    </div> -->
                </div>
                <div
                    class="data-item"
                    @click="goTeamList('myData','3')"
                >
                    <div class="data-item-name">本店金牌店主</div>
                    <div class="data-item-info">
                        <div class="info-detail">{{myVipData.level_3}}</div>
                        <div class="info-name">总个数</div>
                    </div>
                </div>
                <div
                    class="data-item"
                    @click="goTeamList('myData','4')"
                >
                    <div class="data-item-name">本店服务商</div>
                    <div class="data-item-info">
                        <div class="info-detail">{{myVipData.level_4}}</div>
                        <div class="info-name">总个数</div>
                    </div>
                </div>
                <div
                    class="data-item"
                    @click="goTeamList('teamData','2')"
                >
                    <div class="data-item-name">团队店主</div>
                    <div class="data-item-info">
                        <div class="info-detail">{{teamVipData.level_2}}</div>
                        <div class="info-name">总个数</div>
                    </div>
                </div>
                <div
                    class="data-item"
                    @click="goTeamList('teamData','3')"
                >
                    <div class="data-item-name">团队金牌店主</div>
                    <div class="data-item-info">
                        <div class="info-detail">{{teamVipData.level_3}}</div>
                        <div class="info-name">总个数</div>
                    </div>
                </div>
                <div
                    class="data-item"
                    @click="goTeamList('teamData','4')"
                >
                    <div class="data-item-name">团队服务商</div>
                    <div class="data-item-info">
                        <div class="info-detail">{{teamVipData.level_4}}</div>
                        <div class="info-name">总个数</div>
                    </div>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'Team',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            myVipData: '',
            teamVipData: ''
        }
    },
    mounted() {
        this.getTeamData()
    },
    methods: {
        getTeamData() {
            this.axios
                .post('/api/user/data_center/direct_count.json')
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.myVipData = data.data
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
            this.axios
                .post('/api/user/data_center/team_count.json')
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.teamVipData = data.data
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        goTeamList(type, level) {
            this.$router.push({
                path: '/teamList',
                query: {
                    type: type,
                    level: level
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.data-manager-box
    padding-left 0.6rem
    background #fff
    .data-item
        display flex
        align-items center
        height 1.9rem
        padding-right 0.6rem
        border-bottom 1px solid #e5e5e5
        .data-item-name
            flex 1
            font-size 0.38rem
            color #333
            line-height 1.3
        .data-item-info
            margin-left 0.74rem
            text-align right
            .info-detail
                font-size 0.38rem
                color #333
            .info-name
                margin-top 0.18rem
                font-size 0.33rem
                color #999
    .data-item:last-child
        border none
</style>

